KnockoutJS একটি JavaScript লাইব্রেরি যা MVVM (Model-View-ViewModel) ডিজাইন প্যাটার্ন অনুসরণ করে এবং এটি data-binding এবং dependency tracking ফিচার প্রদান করে। KnockoutJS এর সাহায্যে আপনি সহজেই UI কে ডেটার সাথে বাঁধতে পারেন এবং স্বয়ংক্রিয়ভাবে UI আপডেট করতে পারেন। Text Binding, HTML Binding, এবং CSS Binding হল KnockoutJS এর কিছু গুরুত্বপূর্ণ বৈশিষ্ট্য যা ব্যবহারকারীর ইন্টারফেসের সাথে ডেটার সম্পর্ক তৈরি করতে সহায়তা করে।
এই গাইডে, Text Binding, HTML Binding, এবং CSS Binding এর ব্যবহার এবং তাদের কিভাবে আপনার KnockoutJS অ্যাপ্লিকেশনে প্রয়োগ করা যায় তা আলোচনা করা হবে।
1. Text Binding (টেক্সট বাইন্ডিং):
Text Binding KnockoutJS এর একটি সাধারণ এবং সবচেয়ে ব্যবহৃত বৈশিষ্ট্য। এটি ব্যবহার করে আপনি একটি observable বা সাধারণ JavaScript ভেরিয়েবলের মানকে HTML এলিমেন্টে display করতে পারেন।
Text Binding Syntax:
KnockoutJS তে text বাইনডিং ব্যবহার করে আপনি একটি observable বা একটি সাধারণ ভেরিয়েবলের মান HTML এলিমেন্টের মধ্যে বেঁধে দিতে পারেন।
<p data-bind="text: name"></p>
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Text Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>KnockoutJS Text Binding Example</h2>
<p data-bind="text: name"></p>
<input type="text" data-bind="value: name, valueUpdate: 'input'" />
<script>
function AppViewModel() {
this.name = ko.observable("John Doe"); // 'name' একটি observable
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
data-bind="text: name": এটি name observable এর মানকে<p>ট্যাগে দেখাবে।value: name: ইনপুট ফিল্ডে name এর মান অ্যাসাইন করা হয়েছে, এবং ইনপুট পরিবর্তন হলে name এর মান আপডেট হবে।
এখন, যখন আপনি ইনপুট ফিল্ডে name পরিবর্তন করবেন, তখন টেক্সটটিও স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।
2. HTML Binding (এইচটিএমএল বাইন্ডিং):
HTML Binding KnockoutJS এর মাধ্যমে আপনি HTML কনটেন্ট বা এভেন্ট হ্যান্ডলিং ইত্যাদি কাস্টমাইজ করতে পারেন। এটি innerHTML এবং অন্যান্য HTML ডাটা প্রপার্টি সরাসরি কন্ট্রোল করতে সাহায্য করে।
HTML Binding Syntax:
<p data-bind="html: myHtmlContent"></p>
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS HTML Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
</head>
<body>
<h2>KnockoutJS HTML Binding Example</h2>
<p data-bind="html: description"></p>
<input type="text" data-bind="value: description, valueUpdate: 'input'" />
<script>
function AppViewModel() {
this.description = ko.observable("<strong>This is a <em>dynamic</em> description!</strong>");
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
data-bind="html: description": এটি description observable এর HTML কনটেন্টকে<p>ট্যাগে যোগ করবে।value: description: ইনপুট ফিল্ডে description এর মান থাকবে এবং আপনি ইনপুট ফিল্ডে এর মান পরিবর্তন করলে HTML কন্টেন্ট স্বয়ংক্রিয়ভাবে পরিবর্তিত হবে।
এটি HTML tags যেমন strong, em ইত্যাদি ডাইনামিকভাবে রেন্ডার করার জন্য ব্যবহৃত হয়।
3. CSS Binding (সিএসএস বাইন্ডিং):
CSS Binding ব্যবহার করে আপনি KnockoutJS তে একটি HTML এলিমেন্টের স্টাইল বা CSS ক্লাসগুলোকে observable বা ডাইনামিক ডেটার সাথে যুক্ত করতে পারেন। এটি ডেটার উপর ভিত্তি করে একটি এলিমেন্টের সিএসএস প্রপার্টি বা ক্লাস যোগ বা অপসারণ করতে ব্যবহৃত হয়।
CSS Binding Syntax:
<div data-bind="css: { active: isActive }"></div>
উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS CSS Binding</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<style>
.active {
color: green;
font-weight: bold;
}
.inactive {
color: gray;
}
</style>
</head>
<body>
<h2>KnockoutJS CSS Binding Example</h2>
<button data-bind="click: toggleActive">Toggle Active</button>
<div data-bind="css: { active: isActive, inactive: !isActive }">
This is a dynamic styled text.
</div>
<script>
function AppViewModel() {
this.isActive = ko.observable(true); // Observable to track the active state
// Function to toggle isActive value
this.toggleActive = () => {
this.isActive(!this.isActive()); // Toggle the value of isActive
};
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
css: { active: isActive, inactive: !isActive }: এটি CSS ক্লাস যোগ করার জন্য ব্যবহার করা হয়েছে। যদিisActiveসত্য হয়, তবে active ক্লাস যোগ হবে এবং inactive ক্লাসটি সরিয়ে ফেলা হবে।click: toggleActive: এটি isActive মান পরিবর্তন করার জন্য একটি বাটন ব্যবহার করছে।
এটি ইউজার ইন্টারঅ্যাকশনের ভিত্তিতে একটি এলিমেন্টের স্টাইল পরিবর্তন করতে ব্যবহৃত হয়। উদাহরণস্বরূপ, একটি বাটনে ক্লিক করলে টেক্সটের স্টাইল পরিবর্তিত হবে।
4. Additional Examples and Practical Use:
KnockoutJS তে Text Binding, HTML Binding, এবং CSS Binding এর মাধ্যমে আপনি ডেটার উপর ভিত্তি করে UI কে পরিবর্তন করতে পারেন। এসব প্রযুক্তি ফিচারের মাধ্যমে আপনি অ্যাপ্লিকেশনের ইন্টারফেসকে ডাইনামিক এবং ইন্টারঅ্যাকটিভ করতে পারবেন।
Example: Conditional Rendering with CSS Binding
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KnockoutJS Example</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.5.1/knockout-min.js"></script>
<style>
.show {
display: block;
}
.hide {
display: none;
}
</style>
</head>
<body>
<h2>KnockoutJS Example with CSS Binding</h2>
<button data-bind="click: toggleVisibility">Toggle Visibility</button>
<div data-bind="css: { show: isVisible, hide: !isVisible }">
This is a toggleable content block.
</div>
<script>
function AppViewModel() {
this.isVisible = ko.observable(true); // Observable to track visibility
// Function to toggle visibility
this.toggleVisibility = () => {
this.isVisible(!this.isVisible()); // Toggle the visibility
};
}
ko.applyBindings(new AppViewModel());
</script>
</body>
</html>
এখানে:
- CSS Binding ব্যবহার করে আপনি
showএবংhideক্লাস গুলি শর্তসাপেক্ষভাবে যোগ বা সরাতে পারেন, এবং এতে করে div এলিমেন্টটি দৃশ্যমান বা অদৃশ্য হতে থাকবে।
KnockoutJS তে Text Binding, HTML Binding, এবং CSS Binding ব্যবহারের মাধ্যমে আপনি UI কে ডেটার সাথে খুব সহজেই ইন্টারঅ্যাক্ট করতে পারেন। এই বাইনডিংগুলি dynamic data-driven interfaces তৈরি করতে সহায়তা করে এবং ব্যবহারকারীর ইন্টারঅ্যাকশন এবং ডেটার ভিত্তিতে UI তে পরিবর্তন আনে।
